<script lang='ts' setup>
import { reactive, ref } from 'vue';
import userDeptServiceApi from '/@/api/org/bean/user-dept'
import UserDeptFormDialog from './user-dept-form-dialog.vue';
import { deletePageTableSelectionDataList } from '/@/utils/api-service';

const props = defineProps({
    userId: String//用户的id这个建议必须传入
})

//jxtech-page-table Ref对象
const UserDeptPageTableRef = ref()

const UserDeptListState = reactive({
    //表格的列配置
    tableColumn: [
        { label: '序号', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        {
            prop: "unitName", label: "部门描述", type: "link", linkClick: (row: any) => {
                UserDeptListState.currentUserDeptId = row.userDeptId
                UserDeptListState.dialogVisible = true
            }
        },
        { prop: "userTypeDesc", label: "用户类型" },
        { prop: "main", label: "主要部门", slot: "mainSlot" },
        { prop: "orderNum", label: "在部门序号" },
    ],

    userTypeMap: new Map([
        ["1", "主负责人"],
        ["2", "副负责人"],
        ["3", "一般员工"],
        ["4", "第三方接口用户"],
    ]),

    //表格数据加载的方法
    loadData: async (params: any) => {
        let res = await userDeptServiceApi.queryPage(null, { ...params, userId: props.userId, refCols: 'default' })
        res.data.rows.forEach(element => {
            element.userTypeDesc = UserDeptListState.userTypeMap.get(element.userType)
        });
        return res;
    },
    /**
    * 表格删除事件
    */
    deleteTableData: () => {
        //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
        deletePageTableSelectionDataList(UserDeptPageTableRef, userDeptServiceApi);
    },
    dialogVisible: false,
    currentUserDeptId: '',
    onSaveSuccess: () => {
        UserDeptListState.dialogVisible = false;
        UserDeptPageTableRef.value.loadTable();
    },
    //新增数据关联
    onRelationButtonClick: () => {
        UserDeptListState.currentUserDeptId = ''
        UserDeptListState.dialogVisible = true
    }
})

defineExpose({
    getUserDeptPageTableRef: () => UserDeptPageTableRef.value
})

</script>
<template>
    <jxtech-page-table
        ref="UserDeptPageTableRef"
        row-key="userDeptId"
        :table-column="UserDeptListState.tableColumn"
        :table-height="480"
        :load-data="UserDeptListState.loadData"
    >
        <template #header>
            <div class="jxtech-page-table-header-flex">
                <div class="jxtech-page-table-header-flex-left">
                    <span class="jxtech-page-table-header-flex-title">用户部门信息</span>
                </div>
                <div class="jxtech-page-table-header-flex-right">
                    <jxtech-relation-button @click="UserDeptListState.onRelationButtonClick"></jxtech-relation-button>
                    <jxtech-delete-button @click="UserDeptListState.deleteTableData"></jxtech-delete-button>
                </div>
            </div>
        </template>

        <template #mainSlot="{ row }">
            <el-checkbox v-model="row.main" disabled></el-checkbox>
        </template>
    </jxtech-page-table>

    <user-dept-form-dialog
        v-if="UserDeptListState.dialogVisible"
        v-model:visible="UserDeptListState.dialogVisible"
        :user-dept-id="UserDeptListState.currentUserDeptId"
        :user-id="userId"
        @save-success="UserDeptListState.onSaveSuccess"
    ></user-dept-form-dialog>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: var(--el-checkbox-checked-bg-color);
    border-color: var(--el-checkbox-checked-input-border-color);
}
</style>